(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

這個系列和我在12屆鐵人賽的React.js系列文，已經在修訂後和深智數位合作出版成實體書，在天瓏開始預購了，想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

從函式中的 html 開始 : JSX

接續解釋上一篇的Hello world程式碼:

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

我們會發現在上面的程式碼中，我們把html語法當作參數傳遞
這實際上是React所使用的一種特殊Javascript語法: JSX。

在JSX語法多了這些特別的規定:

1. html語法可以當作參數傳遞
   例如，下方的函式會回傳一個寫著「大家好」的按鍵:

   const testFunction =()=> {
       return( <button>大家好</button> );
   }
   
   ReactDOM.render(
       testFunction(),
       document.getElementById('root')
   );
   
   

   執行結果:
   

2. 只能傳遞一個元素
   這裡的意思是「傳遞時是傳一個元素」，講白話就是如果你有一堆div、button......要傳的話，要用一個container把他們包起來。可能有點難懂，所以我們來看範例。
   下方是錯誤的寫法:

   const testFunction =()=> {
       return( 
           <button> 大家好 </button>
           <h1> 我不好 </h1>
       );
   }
   //這個函式因為傳遞的有2個元素，會被compiler視為錯誤語法
   
   ReactDOM.render(
       testFunction(),
       document.getElementById('root')
   );
   

   應該改成這樣:

   const testFunction =()=> {
       return( 
           <div>
               <button> 大家好 </button>
               <h1> 我不好 </h1>
           </div>
       );
   }
   //這個函式因為把很多元素包在1個元素內，等於傳遞時是傳1個元素，會被compiler視為正確語法
   
   ReactDOM.render(
       testFunction(),
       document.getElementById('root')
   );
   

   執行結果:
   
   請注意 「傳遞時是傳一個元素」這句話在React Ver16.2.0後有個例外，我們在後面結尾的時候會提到。

3. 可以在 html 標籤中利用「{}」寫javascript 表示式

   什麼意思? 我們來看這個範例 :

   const showOne = true;
   
   ReactDOM.render(
       <h1> { (showOne==true) ? 1 : 0 } </h1>,
       document.getElementById('root')
   );
   

   你會發現畫面上顯示1，把 showOne 改成 false 則顯示0
   ( 註: 「A?B:C」是常見於其他程式語言中的三元運算子，類似 if 。當A回傳true時，給予B的值，不成立時則給C的值。)
   之後只要在JSX中需要用到javascript的變數/函式...時，就要用{}包起來

4. style變為一物件、屬性名稱規則改用駝峰法(用大寫區隔)、屬性的值變成字串

   聽起來有點難懂，實際看一下範例比較好理解:

   const styleArgument = { fontSize: '100px', color: 'red' };
   
   ReactDOM.render(
       <h1 style = { styleArgument } > Hello, world! </h1>,
       document.getElementById('root')
   );
   

   執行結果:
   

   畫面上就會出現100px的紅色 hello world。
   另外比較容易搞混的是直接在html標籤中給style值的寫法:

   ReactDOM.render(
       <h1 style = {{ fontSize: '100px', color: 'red' }} > Hello, world! </h1>,
       document.getElementById('root')
   );
   

   要用「{ { } }」，外面那層括號代表裡面是javascript語法，裡面的括號表示物件型態。

5. 「class」屬性變成「className」。

   //這是錯誤的寫法
   ReactDOM.render(
       <h1 class = "title" > Hello, world! </h1>,
       document.getElementById('root')
   );
   
   //這是正確的寫法
   ReactDOM.render(
       <h1 className = "title" > Hello, world! </h1>,
       document.getElementById('root')
   );
   
   
   

結合 JSX 和 運算式

透過JSX結合javascript運算式，很多操作可以直觀的被實現。
例如: 在畫面上印出多個按鍵，我們可以這樣做:

const multiButton=()=>{
    var output=[];
    for(let i=0;i<4;++i)
        output.push(<button>我是第{i}個按鍵</button>)
    return output;
}
    
ReactDOM.render(
    <div>
        { multiButton() }
    </div>,
    document.getElementById('root')
);

執行結果:

可以自己試試看相關的操作，熟悉之後會覺得方便很多 ~

小結

在這邊講了常遇到的JSX語法規定，在下一篇，我們會特別來講JSX在函式上的使用。